<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5标签知识与教程 | 全面学习HTML5</title>
    <!-- Tailwind CSS v3 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 配置Tailwind自定义颜色和字体 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3b82f6',
                        secondary: '#10b981',
                        dark: '#1e293b',
                        light: '#f8fafc',
                        accent: '#6366f1',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                },
            }
        }
    </script>
    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .transition-all-300 {
                transition: all 300ms ease-in-out;
            }
        }
    </style>
    <!-- 页面样式 -->
    <style>
        html {
            scroll-behavior: smooth;
        }
        body {
            font-family: 'Inter', system-ui, sans-serif;
        }
        .tag-card {
            @apply bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 p-5 border-l-4 border-primary cursor-pointer hover:translate-y-[-2px];
        }
        .section-header {
            @apply text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark dark:text-light mb-6 pb-2 border-b-2 border-primary/20;
        }
        .fade-in {
            animation: fadeIn 0.5s ease-in;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
    </style>
</head>
<body class="bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200">
    <!-- 导航栏 -->
    <header class="fixed top-0 w-full bg-white/90 dark:bg-gray-900/90 shadow-sm z-50 backdrop-blur-sm">
        <nav class="container mx-auto px-4 py-3 flex items-center justify-between">
            <div class="flex items-center space-x-2">
                <i class="fa fa-code text-primary text-2xl"></i>
                <span class="text-xl font-bold text-primary">HTML5 教程</span>
            </div>
            
            <!-- 桌面导航菜单 -->
            <div class="hidden md:flex items-center space-x-8">
                <a href="#home" class="nav-link hover:text-primary transition-colors">首页</a>
                <a href="#tags" class="nav-link hover:text-primary transition-colors">标签参考</a>
                <a href="#tutorials" class="nav-link hover:text-primary transition-colors">教程</a>
                <a href="#examples" class="nav-link hover:text-primary transition-colors">示例</a>
                <a href="#about" class="nav-link hover:text-primary transition-colors">关于</a>
            </div>
            
            <!-- 深色模式切换 -->
            <button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
                <i class="fa fa-moon-o dark:hidden"></i>
                <i class="fa fa-sun-o hidden dark:inline-block"></i>
            </button>
            
            <!-- 移动菜单按钮 -->
            <button id="mobile-menu-button" class="md:hidden p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
                <i class="fa fa-bars"></i>
            </button>
        </nav>
        
        <!-- 移动导航菜单 -->
        <div id="mobile-menu" class="md:hidden hidden bg-white dark:bg-gray-900 border-t dark:border-gray-800">
            <div class="container mx-auto px-4 py-2 flex flex-col space-y-3">
                <a href="#home" class="py-2 hover:text-primary transition-colors">首页</a>
                <a href="#tags" class="py-2 hover:text-primary transition-colors">标签参考</a>
                <a href="#tutorials" class="py-2 hover:text-primary transition-colors">教程</a>
                <a href="#examples" class="py-2 hover:text-primary transition-colors">示例</a>
                <a href="#about" class="py-2 hover:text-primary transition-colors">关于</a>
            </div>
        </div>
    </header>

    <!-- 主要内容区域 -->
    <main class="container mx-auto px-4 pt-24 pb-16">
        <!-- 首页/英雄区域 -->
        <section id="home" class="min-h-[70vh] flex flex-col justify-center mb-16">
            <div class="max-w-3xl mx-auto text-center">
                <h1 class="text-[clamp(2rem,5vw,4rem)] font-bold text-dark dark:text-light mb-6 leading-tight">
                    全面学习 <span class="text-primary">HTML5</span> 标签与基础知识
                </h1>
                <p class="text-[clamp(1rem,2vw,1.25rem)] text-gray-600 dark:text-gray-400 mb-8">
                    从入门到精通，掌握现代网页开发的基础技能。探索HTML5的全部标签、属性和最佳实践。
                </p>
                <div class="flex flex-col sm:flex-row justify-center gap-4">
                    <a href="#tags" class="px-8 py-3 bg-primary hover:bg-primary/90 text-white rounded-lg font-medium transition-all shadow-lg hover:shadow-xl hover:-translate-y-0.5">
                        开始探索标签 <i class="fa fa-arrow-right ml-2"></i>
                    </a>
                    <a href="#tutorials" class="px-8 py-3 bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 border border-gray-200 dark:border-gray-700 text-gray-800 dark:text-gray-200 rounded-lg font-medium transition-all">
                        浏览教程 <i class="fa fa-book ml-2"></i>
                    </a>
                </div>
            </div>
        </section>

        <!-- 标签分类区域 -->
        <section id="tags" class="mb-20">
            <h2 class="section-header">HTML5 标签分类</h2>
            
            <!-- 标签搜索框 -->
            <div class="mb-8">
                <div class="relative">
                    <input 
                        type="text" 
                        id="tag-search" 
                        placeholder="搜索HTML标签..." 
                        class="w-full px-4 py-3 rounded-lg bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-primary/50"
                    >
                    <i class="fa fa-search absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                </div>
            </div>

            <!-- 标签分类标签页 -->
            <div class="mb-8">
                <div class="flex flex-wrap gap-2" id="tag-categories">
                    <button class="category-btn px-4 py-2 rounded-full bg-primary text-white" data-category="all">
                        全部标签
                    </button>
                    <button class="category-btn px-4 py-2 rounded-full bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 dark:hover:bg-gray-700 transition-colors" data-category="structure">
                        结构标签
                    </button>
                    <button class="category-btn px-4 py-2 rounded-full bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 dark:hover:bg-gray-700 transition-colors" data-category="text">
                        文本标签
                    </button>
                    <button class="category-btn px-4 py-2 rounded-full bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 dark:hover:bg-gray-700 transition-colors" data-category="media">
                        媒体标签
                    </button>
                    <button class="category-btn px-4 py-2 rounded-full bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 dark:hover:bg-gray-700 transition-colors" data-category="form">
                        表单标签
                    </button>
                    <button class="category-btn px-4 py-2 rounded-full bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 dark:hover:bg-gray-700 transition-colors" data-category="interactive">
                        交互标签
                    </button>
                </div>
            </div>

            <!-- 标签卡片网格 -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="tag-grid">
                <!-- 结构标签 -->
                <div class="tag-card" data-category="structure" data-tag="html">
                    <div class="flex justify-between items-start mb-3">
                        <h3 class="text-lg font-bold text-dark dark:text-light">&lt;html&gt;</h3>
                        <span class="px-2 py-1 bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 text-xs rounded">结构</span>
                    </div>
                    <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">HTML文档的根元素，包含整个HTML页面的内容。</p>
                    <div class="flex items-center text-xs text-gray-500 dark:text-gray-500">
                        <span class="mr-3"><i class="fa fa-check-circle mr-1 text-green-500"></i>必需标签</span>
                        <span><i class="fa fa-code mr-1 text-primary"></i>HTML5</span>
                    </div>
                </div>

                <div class="tag-card" data-category="structure" data-tag="head">
                    <div class="flex justify-between items-start mb-3">
                        <h3 class="text-lg font-bold text-dark dark:text-light">&lt;head&gt;</h3>
                        <span class="px-2 py-1 bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 text-xs rounded">结构</span>
                    </div>
                    <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">包含文档的元数据，如标题、字符集和链接等。</p>
                    <div class="flex items-center text-xs text-gray-500 dark:text-gray-500">
                        <span class="mr-3"><i class="fa fa-check-circle mr-1 text-green-500"></i>必需标签</span>
                        <span><i class="fa fa-code mr-1 text-primary"></i>HTML5</span>
                    </div>
                </div>

                <div class="tag-card" data-category="structure" data-tag="body">
                    <div class="flex justify-between items-start mb-3">
                        <h3 class="text-lg font-bold text-dark dark:text-light">&lt;body&gt;</h3>
                        <span class="px-2 py-1 bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 text-xs rounded">结构</span>
                    </div>
                    <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">包含用户可见的页面内容，如文本、图像和链接等。</p>
                    <div class="flex items-center text-xs text-gray-500 dark:text-gray-500">
                        <span class="mr-3"><i class="fa fa-check-circle mr-1 text-green-500"></i>必需标签</span>
                        <span><i class="fa fa-code mr-1 text-primary"></i>HTML5</span>
                    </div>
                </div>

                <!-- 文本标签 -->
                <div class="tag-card" data-category="text" data-tag="h1">
                    <div class="flex justify-between items-start mb-3">
                        <h3 class="text-lg font-bold text-dark dark:text-light">&lt;h1&gt; - &lt;h6&gt;</h3>
                        <span class="px-2 py-1 bg-green-100 dark:bg-green-900 text-green-700 dark:text-green-300 text-xs rounded">文本</span>
                    </div>
                    <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">定义不同级别的标题，h1级别最高，h6级别最低。</p>
                    <div class="flex items-center text-xs text-gray-500 dark:text-gray-500">
                        <span><i class="fa fa-code mr-1 text-primary"></i>HTML5</span>
                    </div>
                </div>

                <div class="tag-card" data-category="text" data-tag="p">
                    <div class="flex justify-between items-start mb-3">
                        <h3 class="text-lg font-bold text-dark dark:text-light">&lt;p&gt;</h3>
                        <span class="px-2 py-1 bg-green-100 dark:bg-green-900 text-green-700 dark:text-green-300 text-xs rounded">文本</span>
                    </div>
                    <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">定义段落文本。</p>
                    <div class="flex items-center text-xs text-gray-500 dark:text-gray-500">
                        <span><i class="fa fa-code mr-1 text-primary"></i>HTML5</span>
                    </div>
                </div>

                <div class="tag-card" data-category="text" data-tag="a">
                    <div class="flex justify-between items-start mb-3">
                        <h3 class="text-lg font-bold text-dark dark:text-light">&lt;a&gt;</h3>
                        <span class="px-2 py-1 bg-green-100 dark:bg-green-900 text-green-700 dark:text-green-300 text-xs rounded">文本</span>
                    </div>
                    <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">定义超链接，用于链接到其他网页或资源。</p>
                    <div class="flex items-center text-xs text-gray-500 dark:text-gray-500">
                        <span><i class="fa fa-code mr-1 text-primary"></i>HTML5</span>
                    </div>
                </div>

                <!-- 媒体标签 -->
                <div class="tag-card" data-category="media" data-tag="img">
                    <div class="flex justify-between items-start mb-3">
                        <h3 class="text-lg font-bold text-dark dark:text-light">&lt;img&gt;</h3>
                        <span class="px-2 py-1 bg-purple-100 dark:bg-purple-900 text-purple-700 dark:text-purple-300 text-xs rounded">媒体</span>
                    </div>
                    <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">在网页中嵌入图像。</p>
                    <div class="flex items-center text-xs text-gray-500 dark:text-gray-500">
                        <span><i class="fa fa-code mr-1 text-primary"></i>HTML5</span>
                    </div>
                </div>

                <div class="tag-card" data-category="media" data-tag="audio">
                    <div class="flex justify-between items-start mb-3">
                        <h3 class="text-lg font-bold text-dark dark:text-light">&lt;audio&gt;</h3>
                        <span class="px-2 py-1 bg-purple-100 dark:bg-purple-900 text-purple-700 dark:text-purple-300 text-xs rounded">媒体</span>
                    </div>
                    <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">在网页中嵌入音频内容。</p>
                    <div class="flex items-center text-xs text-gray-500 dark:text-gray-500">
                        <span><i class="fa fa-star mr-1 text-yellow-500"></i>HTML5新增</span>
                    </div>
                </div>

                <div class="tag-card" data-category="media" data-tag="video">
                    <div class="flex justify-between items-start mb-3">
                        <h3 class="text-lg font-bold text-dark dark:text-light">&lt;video&gt;</h3>
                        <span class="px-2 py-1 bg-purple-100 dark:bg-purple-900 text-purple-700 dark:text-purple-300 text-xs rounded">媒体</span>
                    </div>
                    <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">在网页中嵌入视频内容。</p>
                    <div class="flex items-center text-xs text-gray-500 dark:text-gray-500">
                        <span><i class="fa fa-star mr-1 text-yellow-500"></i>HTML5新增</span>
                    </div>
                </div>

                <!-- 表单标签 -->
                <div class="tag-card" data-category="form" data-tag="form">
                    <div class="flex justify-between items-start mb-3">
                        <h3 class="text-lg font-bold text-dark dark:text-light">&lt;form&gt;</h3>
                        <span class="px-2 py-1 bg-orange-100 dark:bg-orange-900 text-orange-700 dark:text-orange-300 text-xs rounded">表单</span>
                    </div>
                    <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">创建用于用户输入的HTML表单。</p>
                    <div class="flex items-center text-xs text-gray-500 dark:text-gray-500">
                        <span><i class="fa fa-code mr-1 text-primary"></i>HTML5</span>
                    </div>
                </div>

                <div class="tag-card" data-category="form" data-tag="input">
                    <div class="flex justify-between items-start mb-3">
                        <h3 class="text-lg font-bold text-dark dark:text-light">&lt;input&gt;</h3>
                        <span class="px-2 py-1 bg-orange-100 dark:bg-orange-900 text-orange-700 dark:text-orange-300 text-xs rounded">表单</span>
                    </div>
                    <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">创建各种类型的输入字段，如文本、密码、复选框等。</p>
                    <div class="flex items-center text-xs text-gray-500 dark:text-gray-500">
                        <span><i class="fa fa-code mr-1 text-primary"></i>HTML5</span>
                    </div>
                </div>

                <div class="tag-card" data-category="form" data-tag="button">
                    <div class="flex justify-between items-start mb-3">
                        <h3 class="text-lg font-bold text-dark dark:text-light">&lt;button&gt;</h3>
                        <span class="px-2 py-1 bg-orange-100 dark:bg-orange-900 text-orange-700 dark:text-orange-300 text-xs rounded">表单</span>
                    </div>
                    <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">创建可点击的按钮。</p>
                    <div class="flex items-center text-xs text-gray-500 dark:text-gray-500">
                        <span><i class="fa fa-code mr-1 text-primary"></i>HTML5</span>
                    </div>
                </div>

                <!-- 交互标签 -->
                <div class="tag-card" data-category="interactive" data-tag="canvas">
                    <div class="flex justify-between items-start mb-3">
                        <h3 class="text-lg font-bold text-dark dark:text-light">&lt;canvas&gt;</h3>
                        <span class="px-2 py-1 bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-300 text-xs rounded">交互</span>
                    </div>
                    <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">用于通过JavaScript绘制图形、图表等。</p>
                    <div class="flex items-center text-xs text-gray-500 dark:text-gray-500">
                        <span><i class="fa fa-star mr-1 text-yellow-500"></i>HTML5新增</span>
                    </div>
                </div>

                <div class="tag-card" data-category="interactive" data-tag="svg">
                    <div class="flex justify-between items-start mb-3">
                        <h3 class="text-lg font-bold text-dark dark:text-light">&lt;svg&gt;</h3>
                        <span class="px-2 py-1 bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-300 text-xs rounded">交互</span>
                    </div>
                    <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">定义矢量图形。</p>
                    <div class="flex items-center text-xs text-gray-500 dark:text-gray-500">
                        <span><i class="fa fa-code mr-1 text-primary"></i>HTML5</span>
                    </div>
                </div>

                <div class="tag-card" data-category="interactive" data-tag="details">
                    <div class="flex justify-between items-start mb-3">
                        <h3 class="text-lg font-bold text-dark dark:text-light">&lt;details&gt;</h3>
                        <span class="px-2 py-1 bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-300 text-xs rounded">交互</span>
                    </div>
                    <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">创建可展开/折叠的内容区域。</p>
                    <div class="flex items-center text-xs text-gray-500 dark:text-gray-500">
                        <span><i class="fa fa-star mr-1 text-yellow-500"></i>HTML5新增</span>
                    </div>
                </div>
            </div>
        </section>

        <!-- 教程部分 -->
        <section id="tutorials" class="mb-20">
            <h2 class="section-header">HTML5 基础知识教程</h2>
            
            <!-- 教程列表 -->
            <div class="space-y-8">
                <!-- 教程1 -->
                <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden">
                    <div class="p-6">
                        <div class="flex items-start">
                            <div class="flex-shrink-0 w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center text-primary text-xl font-bold">1</div>
                            <div class="ml-5 flex-grow">
                                <h3 class="text-xl font-bold text-dark dark:text-light mb-3">HTML5 基础结构</h3>
                                <p class="text-gray-600 dark:text-gray-400 mb-4">了解HTML文档的基本结构，包括DOCTYPE声明、html、head和body标签的作用。</p>
                                <div class="flex items-center text-sm text-primary hover:text-primary/80 cursor-pointer">
                                    <span>阅读教程</span>
                                    <i class="fa fa-arrow-right ml-2"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 教程2 -->
                <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden">
                    <div class="p-6">
                        <div class="flex items-start">
                            <div class="flex-shrink-0 w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center text-primary text-xl font-bold">2</div>
                            <div class="ml-5 flex-grow">
                                <h3 class="text-xl font-bold text-dark dark:text-light mb-3">HTML5 文本格式化</h3>
                                <p class="text-gray-600 dark:text-gray-400 mb-4">学习如何使用HTML标签来格式化文本，包括标题、段落、列表和其他文本元素。</p>
                                <div class="flex items-center text-sm text-primary hover:text-primary/80 cursor-pointer">
                                    <span>阅读教程</span>
                                    <i class="fa fa-arrow-right ml-2"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 教程3 -->
                <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden">
                    <div class="p-6">
                        <div class="flex items-start">
                            <div class="flex-shrink-0 w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center text-primary text-xl font-bold">3</div>
                            <div class="ml-5 flex-grow">
                                <h3 class="text-xl font-bold text-dark dark:text-light mb-3">HTML5 链接和图像</h3>
                                <p class="text-gray-600 dark:text-gray-400 mb-4">掌握如何创建超链接和插入图像，以及如何优化它们以提高用户体验。</p>
                                <div class="flex items-center text-sm text-primary hover:text-primary/80 cursor-pointer">
                                    <span>阅读教程</span>
                                    <i class="fa fa-arrow-right ml-2"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 教程4 -->
                <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden">
                    <div class="p-6">
                        <div class="flex items-start">
                            <div class="flex-shrink-0 w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center text-primary text-xl font-bold">4</div>
                            <div class="ml-5 flex-grow">
                                <h3 class="text-xl font-bold text-dark dark:text-light mb-3">HTML5 表格和表单</h3>
                                <p class="text-gray-600 dark:text-gray-400 mb-4">学习如何创建表格来显示数据，以及如何创建表单来收集用户输入。</p>
                                <div class="flex items-center text-sm text-primary hover:text-primary/80 cursor-pointer">
                                    <span>阅读教程</span>
                                    <i class="fa fa-arrow-right ml-2"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 查看更多教程按钮 -->
            <div class="text-center mt-10">
                <button class="px-8 py-3 bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 border border-gray-200 dark:border-gray-700 text-gray-800 dark:text-gray-200 rounded-lg font-medium transition-all">
                    查看更多教程 <i class="fa fa-angle-down ml-2"></i>
                </button>
            </div>
        </section>

        <!-- 代码示例部分 -->
        <section id="examples" class="mb-20">
            <h2 class="section-header">HTML5 代码示例</h2>
            
            <!-- 示例标签页 -->
            <div class="mb-8 border-b border-gray-200 dark:border-gray-700">
                <div class="flex space-x-8" id="example-tabs">
                    <button class="example-tab py-3 border-b-2 border-primary text-primary font-medium" data-tab="basic">
                        基础结构
                    </button>
                    <button class="example-tab py-3 border-b-2 border-transparent hover:text-gray-600 dark:hover:text-gray-400 transition-colors" data-tab="form">
                        表单示例
                    </button>
                    <button class="example-tab py-3 border-b-2 border-transparent hover:text-gray-600 dark:hover:text-gray-400 transition-colors" data-tab="media">
                        媒体嵌入
                    </button>
                </div>
            </div>

            <!-- 示例内容 -->
            <div id="example-content">
                <!-- 基础结构示例 -->
                <div class="example-tab-content" data-tab="basic">
                    <div class="bg-gray-900 rounded-lg p-6 mb-6">
                        <pre class="text-sm text-green-400 overflow-x-auto"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="zh-CN"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;我的第一个HTML5页面&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;header&gt;
        &lt;h1&gt;欢迎来到我的网站&lt;/h1&gt;
    &lt;/header&gt;
    &lt;main&gt;
        &lt;section&gt;
            &lt;h2&gt;关于我&lt;/h2&gt;
            &lt;p&gt;这是一个使用HTML5创建的示例页面。&lt;/p&gt;
        &lt;/section&gt;
    &lt;/main&gt;
    &lt;footer&gt;
        &lt;p&gt;&amp;copy; 2024 我的网站. 保留所有权利。&lt;/p&gt;
    &lt;/footer&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
                    </div>
                    <div class="flex justify-between items-center">
                        <p class="text-gray-600 dark:text-gray-400 text-sm">HTML5文档的基本结构示例，包含所有必需的标签。</p>
                        <button class="text-xs px-3 py-1 bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 dark:hover:bg-gray-700 rounded transition-colors">
                            <i class="fa fa-copy mr-1"></i> 复制代码
                        </button>
                    </div>
                </div>

                <!-- 表单示例 -->
                <div class="example-tab-content hidden" data-tab="form">
                    <div class="bg-gray-900 rounded-lg p-6 mb-6">
                        <pre class="text-sm text-green-400 overflow-x-auto"><code>&lt;form action="/submit-form" method="post"&gt;
    &lt;div&gt;
        &lt;label for="name"&gt;姓名：&lt;/label&gt;
        &lt;input type="text" id="name" name="name" required&gt;
    &lt;/div&gt;
    &lt;div&gt;
        &lt;label for="email"&gt;邮箱：&lt;/label&gt;
        &lt;input type="email" id="email" name="email" required&gt;
    &lt;/div&gt;
    &lt;div&gt;
        &lt;label for="message"&gt;留言：&lt;/label&gt;
        &lt;textarea id="message" name="message" rows="4" required&gt;&lt;/textarea&gt;
    &lt;/div&gt;
    &lt;div&gt;
        &lt;label&gt;
            &lt;input type="checkbox" name="subscribe"&gt;
            订阅我的新闻通讯
        &lt;/label&gt;
    &lt;/div&gt;
    &lt;button type="submit"&gt;提交&lt;/button&gt;
&lt;/form&gt;</code></pre>
                    </div>
                    <div class="flex justify-between items-center">
                        <p class="text-gray-600 dark:text-gray-400 text-sm">HTML5表单示例，包含各种输入类型和验证。</p>
                        <button class="text-xs px-3 py-1 bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 dark:hover:bg-gray-700 rounded transition-colors">
                            <i class="fa fa-copy mr-1"></i> 复制代码
                        </button>
                    </div>
                </div>

                <!-- 媒体嵌入示例 -->
                <div class="example-tab-content hidden" data-tab="media">
                    <div class="bg-gray-900 rounded-lg p-6 mb-6">
                        <pre class="text-sm text-green-400 overflow-x-auto"><code>&lt;!-- 图片示例 --&gt;
&lt;figure&gt;
    &lt;img src="example.jpg" alt="示例图片" loading="lazy"&gt;
    &lt;figcaption&gt;图片说明文字&lt;/figcaption&gt;
&lt;/figure&gt;

&lt;!-- 音频示例 --&gt;
&lt;audio controls&gt;
    &lt;source src="music.mp3" type="audio/mpeg"&gt;
    您的浏览器不支持音频元素。
&lt;/audio&gt;

&lt;!-- 视频示例 --&gt;
&lt;video controls width="640" height="360"&gt;
    &lt;source src="movie.mp4" type="video/mp4"&gt;
    您的浏览器不支持视频元素。
&lt;/video&gt;</code></pre>
                    </div>
                    <div class="flex justify-between items-center">
                        <p class="text-gray-600 dark:text-gray-400 text-sm">HTML5媒体标签示例，包括图像、音频和视频嵌入。</p>
                        <button class="text-xs px-3 py-1 bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 dark:hover:bg-gray-700 rounded transition-colors">
                            <i class="fa fa-copy mr-1"></i> 复制代码
                        </button>
                    </div>
                </div>
            </div>
        </section>

        <!-- 标签参考表格 -->
        <section id="reference" class="mb-20">
            <h2 class="section-header">HTML5 标签速查表</h2>
            
            <div class="overflow-x-auto">
                <table class="w-full bg-white dark:bg-gray-800 rounded-lg shadow-md">
                    <thead>
                        <tr class="bg-gray-100 dark:bg-gray-700 text-left">
                            <th class="px-6 py-3 text-sm font-semibold">标签</th>
                            <th class="px-6 py-3 text-sm font-semibold">描述</th>
                            <th class="px-6 py-3 text-sm font-semibold">分类</th>
                            <th class="px-6 py-3 text-sm font-semibold">HTML5</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
                        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
                            <td class="px-6 py-4 text-sm font-mono text-primary">&lt;html&gt;</td>
                            <td class="px-6 py-4 text-sm">HTML文档的根元素</td>
                            <td class="px-6 py-4 text-sm">结构</td>
                            <td class="px-6 py-4 text-sm"><i class="fa fa-check text-green-500"></i></td>
                        </tr>
                        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
                            <td class="px-6 py-4 text-sm font-mono text-primary">&lt;head&gt;</td>
                            <td class="px-6 py-4 text-sm">文档的头部，包含元数据</td>
                            <td class="px-6 py-4 text-sm">结构</td>
                            <td class="px-6 py-4 text-sm"><i class="fa fa-check text-green-500"></i></td>
                        </tr>
                        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
                            <td class="px-6 py-4 text-sm font-mono text-primary">&lt;body&gt;</td>
                            <td class="px-6 py-4 text-sm">文档的主体内容</td>
                            <td class="px-6 py-4 text-sm">结构</td>
                            <td class="px-6 py-4 text-sm"><i class="fa fa-check text-green-500"></i></td>
                        </tr>
                        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
                            <td class="px-6 py-4 text-sm font-mono text-primary">&lt;h1&gt;-&lt;h6&gt;</td>
                            <td class="px-6 py-4 text-sm">标题标签，级别1到6</td>
                            <td class="px-6 py-4 text-sm">文本</td>
                            <td class="px-6 py-4 text-sm"><i class="fa fa-check text-green-500"></i></td>
                        </tr>
                        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
                            <td class="px-6 py-4 text-sm font-mono text-primary">&lt;p&gt;</td>
                            <td class="px-6 py-4 text-sm">段落</td>
                            <td class="px-6 py-4 text-sm">文本</td>
                            <td class="px-6 py-4 text-sm"><i class="fa fa-check text-green-500"></i></td>
                        </tr>
                        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
                            <td class="px-6 py-4 text-sm font-mono text-primary">&lt;a&gt;</td>
                            <td class="px-6 py-4 text-sm">超链接</td>
                            <td class="px-6 py-4 text-sm">文本</td>
                            <td class="px-6 py-4 text-sm"><i class="fa fa-check text-green-500"></i></td>
                        </tr>
                        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
                            <td class="px-6 py-4 text-sm font-mono text-primary">&lt;img&gt;</td>
                            <td class="px-6 py-4 text-sm">图像</td>
                            <td class="px-6 py-4 text-sm">媒体</td>
                            <td class="px-6 py-4 text-sm"><i class="fa fa-check text-green-500"></i></td>
                        </tr>
                        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
                            <td class="px-6 py-4 text-sm font-mono text-primary">&lt;audio&gt;</td>
                            <td class="px-6 py-4 text-sm">音频内容</td>
                            <td class="px-6 py-4 text-sm">媒体</td>
                            <td class="px-6 py-4 text-sm"><i class="fa fa-star text-yellow-500"></i></td>
                        </tr>
                        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
                            <td class="px-6 py-4 text-sm font-mono text-primary">&lt;video&gt;</td>
                            <td class="px-6 py-4 text-sm">视频内容</td>
                            <td class="px-6 py-4 text-sm">媒体</td>
                            <td class="px-6 py-4 text-sm"><i class="fa fa-star text-yellow-500"></i></td>
                        </tr>
                        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
                            <td class="px-6 py-4 text-sm font-mono text-primary">&lt;form&gt;</td>
                            <td class="px-6 py-4 text-sm">表单</td>
                            <td class="px-6 py-4 text-sm">表单</td>
                            <td class="px-6 py-4 text-sm"><i class="fa fa-check text-green-500"></i></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>

        <!-- 关于部分 -->
        <section id="about" class="mb-10">
            <h2 class="section-header">关于本站</h2>
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
                <p class="text-gray-600 dark:text-gray-400 mb-4">
                    本网站旨在为初学者和中级开发者提供全面的HTML5标签知识和教程。我们提供了详细的标签参考、实用的代码示例和循序渐进的教程，帮助您快速掌握HTML5的核心概念和最佳实践。
                </p>
                <p class="text-gray-600 dark:text-gray-400">
                    无论您是刚开始学习网页开发，还是想提升自己的技能，本网站都能为您提供有价值的资源和指导。如果您有任何问题或建议，请随时联系我们。
                </p>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-10">
        <div class="container mx-auto px-4">
            <div class="flex flex-col md:flex-row justify-between">
                <div class="mb-6 md:mb-0">
                    <div class="flex items-center space-x-2 mb-4">
                        <i class="fa fa-code text-primary text-2xl"></i>
                        <span class="text-xl font-bold text-white">HTML5 教程</span>
                    </div>
                    <p class="text-gray-400 text-sm max-w-md">
                        全面学习HTML5标签与基础知识，从入门到精通，掌握现代网页开发的基础技能。
                    </p>
                </div>
                
                <div class="grid grid-cols-2 md:grid-cols-3 gap-8">
                    <div>
                        <h4 class="text-lg font-semibold mb-4">快速链接</h4>
                        <ul class="space-y-2 text-gray-400 text-sm">
                            <li><a href="#home" class="hover:text-primary transition-colors">首页</a></li>
                            <li><a href="#tags" class="hover:text-primary transition-colors">标签参考</a></li>
                            <li><a href="#tutorials" class="hover:text-primary transition-colors">教程</a></li>
                            <li><a href="#examples" class="hover:text-primary transition-colors">示例</a></li>
                        </ul>
                    </div>
                    
                    <div>
                        <h4 class="text-lg font-semibold mb-4">资源</h4>
                        <ul class="space-y-2 text-gray-400 text-sm">
                            <li><a href="#" class="hover:text-primary transition-colors">博客</a></li>
                            <li><a href="#" class="hover:text-primary transition-colors">视频教程</a></li>
                            <li><a href="#" class="hover:text-primary transition-colors">常见问题</a></li>
                            <li><a href="#" class="hover:text-primary transition-colors">联系我们</a></li>
                        </ul>
                    </div>
                    
                    <div>
                        <h4 class="text-lg font-semibold mb-4">关注我们</h4>
                        <div class="flex space-x-4 text-gray-400">
                            <a href="#" class="hover:text-primary transition-colors"><i class="fa fa-github text-xl"></i></a>
                            <a href="#" class="hover:text-primary transition-colors"><i class="fa fa-twitter text-xl"></i></a>
                            <a href="#" class="hover:text-primary transition-colors"><i class="fa fa-youtube-play text-xl"></i></a>
                            <a href="#" class="hover:text-primary transition-colors"><i class="fa fa-instagram text-xl"></i></a>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500 text-sm">
                <p>&copy; 2024 HTML5教程. 保留所有权利。</p>
            </div>
        </div>
    </footer>

    <!-- 标签详情模态框 -->
    <div id="tag-modal" class="fixed inset-0 bg-black/50 z-50 hidden flex items-center justify-center p-4">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-3xl w-full max-h-[90vh] overflow-y-auto fade-in">
            <div class="p-6">
                <div class="flex justify-between items-center mb-6">
                    <h3 class="text-2xl font-bold text-dark dark:text-light" id="modal-tag-name">&lt;tag&gt;</h3>
                    <button id="close-modal" class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
                        <i class="fa fa-times"></i>
                    </button>
                </div>
                
                <div id="modal-content">
                    <!-- 标签详情内容将通过JavaScript动态填充 -->
                </div>
            </div>
        </div>
    </div>

    <!-- 回到顶部按钮 -->
    <button id="back-to-top" class="fixed bottom-6 right-6 p-3 bg-primary text-white rounded-full shadow-lg opacity-0 invisible transition-all duration-300 hover:bg-primary/90">
        <i class="fa fa-arrow-up"></i>
    </button>

    <!-- JavaScript -->
    <script>
        // 等待DOM加载完成
        document.addEventListener('DOMContentLoaded', function() {
            // 深色模式切换
            const themeToggle = document.getElementById('theme-toggle');
            const htmlElement = document.documentElement;
            
            // 检查本地存储中的主题偏好
            if (localStorage.getItem('theme') === 'dark' || 
                (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
                htmlElement.classList.add('dark');
            } else {
                htmlElement.classList.remove('dark');
            }
            
            // 切换主题
            themeToggle.addEventListener('click', function() {
                htmlElement.classList.toggle('dark');
                localStorage.setItem('theme', htmlElement.classList.contains('dark') ? 'dark' : 'light');
            });
            
            // 移动菜单切换
            const mobileMenuButton = document.getElementById('mobile-menu-button');
            const mobileMenu = document.getElementById('mobile-menu');
            
            mobileMenuButton.addEventListener('click', function() {
                mobileMenu.classList.toggle('hidden');
            });
            
            // 标签分类筛选
            const categoryButtons = document.querySelectorAll('.category-btn');
            const tagCards = document.querySelectorAll('.tag-card');
            
            categoryButtons.forEach(button => {
                button.addEventListener('click', function() {
                    // 更新按钮样式
                    categoryButtons.forEach(btn => {
                        btn.classList.remove('bg-primary', 'text-white');
                        btn.classList.add('bg-gray-200', 'dark:bg-gray-800', 'hover:bg-gray-300', 'dark:hover:bg-gray-700');
                    });
                    this.classList.remove('bg-gray-200', 'dark:bg-gray-800', 'hover:bg-gray-300', 'dark:hover:bg-gray-700');
                    this.classList.add('bg-primary', 'text-white');
                    
                    // 筛选标签
                    const category = this.getAttribute('data-category');
                    tagCards.forEach(card => {
                        if (category === 'all' || card.getAttribute('data-category') === category) {
                            card.style.display = 'block';
                            // 添加动画效果
                            setTimeout(() => {
                                card.classList.add('fade-in');
                            }, 10);
                        } else {
                            card.style.display = 'none';
                            card.classList.remove('fade-in');
                        }
                    });
                });
            });
            
            // 标签搜索功能
            const tagSearch = document.getElementById('tag-search');
            
            tagSearch.addEventListener('input', function() {
                const searchTerm = this.value.toLowerCase();
                
                tagCards.forEach(card => {
                    const tagName = card.getAttribute('data-tag').toLowerCase();
                    const tagDescription = card.querySelector('p').textContent.toLowerCase();
                    
                    if (tagName.includes(searchTerm) || tagDescription.includes(searchTerm)) {
                        card.style.display = 'block';
                    } else {
                        card.style.display = 'none';
                    }
                });
            });
            
            // 示例标签页切换
            const exampleTabs = document.querySelectorAll('.example-tab');
            const exampleTabContents = document.querySelectorAll('.example-tab-content');
            
            exampleTabs.forEach(tab => {
                tab.addEventListener('click', function() {
                    // 更新标签页样式
                    exampleTabs.forEach(t => {
                        t.classList.remove('border-primary', 'text-primary');
                        t.classList.add('border-transparent', 'hover:text-gray-600', 'dark:hover:text-gray-400');
                    });
                    this.classList.remove('border-transparent', 'hover:text-gray-600', 'dark:hover:text-gray-400');
                    this.classList.add('border-primary', 'text-primary');
                    
                    // 切换内容
                    const tabId = this.getAttribute('data-tab');
                    exampleTabContents.forEach(content => {
                        if (content.getAttribute('data-tab') === tabId) {
                            content.classList.remove('hidden');
                        } else {
                            content.classList.add('hidden');
                        }
                    });
                });
            });
            
            // 标签详情模态框
            const tagModal = document.getElementById('tag-modal');
            const closeModal = document.getElementById('close-modal');
            const modalTagName = document.getElementById('modal-tag-name');
            const modalContent = document.getElementById('modal-content');
            
            // 标签卡片点击事件
            tagCards.forEach(card => {
                card.addEventListener('click', function() {
                    const tagName = this.getAttribute('data-tag');
                    modalTagName.textContent = `<${tagName}>`;
                    
                    // 根据标签名称生成不同的模态框内容
                    // 这里是简化版本，实际应用中可以根据需要扩展
                    generateModalContent(tagName);
                    
                    tagModal.classList.remove('hidden');
                    document.body.style.overflow = 'hidden';
                });
            });
            
            // 关闭模态框
            closeModal.addEventListener('click', function() {
                tagModal.classList.add('hidden');
                document.body.style.overflow = 'auto';
            });
            
            // 点击模态框外部关闭
            tagModal.addEventListener('click', function(e) {
                if (e.target === tagModal) {
                    tagModal.classList.add('hidden');
                    document.body.style.overflow = 'auto';
                }
            });
            
            // 生成标签详情模态框内容
            function generateModalContent(tagName) {
                // 这里是示例内容，实际应用中可以扩展为包含更多标签的详细信息
                const tagInfo = {
                    'html': {
                        'description': 'HTML文档的根元素，包含整个HTML页面的内容。',
                        'syntax': '<html lang="zh-CN">...</html>',
                        'attributes': 'lang - 指定文档的语言',
                        'notes': '每个HTML文档都必须有一个<html>标签，它是文档的根元素。'
                    },
                    'head': {
                        'description': '包含文档的元数据，如标题、字符集和链接等。',
                        'syntax': '<head>...</head>',
                        'attributes': '无特定属性',
                        'notes': 'head元素位于html元素内部，body元素之前。'
                    },
                    'body': {
                        'description': '包含用户可见的页面内容，如文本、图像和链接等。',
                        'syntax': '<body>...</body>',
                        'attributes': '无特定属性',
                        'notes': 'body元素包含了所有用户可以看到的内容。'
                    },
                    'h1': {
                        'description': '定义最大的标题，h1-h6表示不同级别的标题。',
                        'syntax': '<h1>标题文本</h1>',
                        'attributes': '无特定属性',
                        'notes': '一个页面应该只有一个h1标签，表示最重要的标题。'
                    },
                    'p': {
                        'description': '定义段落文本。',
                        'syntax': '<p>段落文本</p>',
                        'attributes': '无特定属性',
                        'notes': 'p标签会自动在前后添加空白。'
                    },
                    'a': {
                        'description': '定义超链接，用于链接到其他网页或资源。',
                        'syntax': '<a href="url">链接文本</a>',
                        'attributes': 'href - 链接的目标URL, target - 链接的打开方式',
                        'notes': 'href属性是必需的，指定链接的目标地址。'
                    },
                    'img': {
                        'description': '在网页中嵌入图像。',
                        'syntax': '<img src="image.jpg" alt="图像描述">',
                        'attributes': 'src - 图像的URL, alt - 图像的替代文本, width/height - 图像的尺寸',
                        'notes': 'img标签是自闭合的，不需要结束标签。'
                    },
                    'audio': {
                        'description': '在网页中嵌入音频内容。',
                        'syntax': '<audio controls><source src="audio.mp3" type="audio/mpeg"></audio>',
                        'attributes': 'controls - 显示音频控件, autoplay - 自动播放, loop - 循环播放',
                        'notes': 'HTML5新增标签，不支持旧版浏览器。'
                    },
                    'video': {
                        'description': '在网页中嵌入视频内容。',
                        'syntax': '<video controls><source src="video.mp4" type="video/mp4"></video>',
                        'attributes': 'controls - 显示视频控件, autoplay - 自动播放, loop - 循环播放, width/height - 视频的尺寸',
                        'notes': 'HTML5新增标签，不支持旧版浏览器。'
                    },
                    'form': {
                        'description': '创建用于用户输入的HTML表单。',
                        'syntax': '<form action="/submit" method="post">...</form>',
                        'attributes': 'action - 表单提交的URL, method - 提交方法(GET或POST)',
                        'notes': '表单内部包含各种输入控件，如input、textarea等。'
                    },
                    'input': {
                        'description': '创建各种类型的输入字段，如文本、密码、复选框等。',
                        'syntax': '<input type="text" name="username">',
                        'attributes': 'type - 输入类型, name - 输入字段的名称, value - 输入字段的值, required - 是否为必填',
                        'notes': 'input标签是自闭合的，不需要结束标签。'
                    },
                    'button': {
                        'description': '创建可点击的按钮。',
                        'syntax': '<button type="submit">提交</button>',
                        'attributes': 'type - 按钮类型(submit、reset、button), disabled - 是否禁用按钮',
                        'notes': 'button标签可以包含文本或图像。'
                    },
                    'canvas': {
                        'description': '用于通过JavaScript绘制图形、图表等。',
                        'syntax': '<canvas id="myCanvas" width="200" height="100"></canvas>',
                        'attributes': 'width - 画布宽度, height - 画布高度',
                        'notes': 'HTML5新增标签，需要使用JavaScript来绘制内容。'
                    },
                    'svg': {
                        'description': '定义矢量图形。',
                        'syntax': '<svg width="100" height="100"><circle cx="50" cy="50" r="40" /></svg>',
                        'attributes': 'width - SVG图像宽度, height - SVG图像高度',
                        'notes': 'SVG是一种基于XML的矢量图形格式。'
                    },
                    'details': {
                        'description': '创建可展开/折叠的内容区域。',
                        'syntax': '<details><summary>点击展开</summary><p>详细内容</p></details>',
                        'attributes': 'open - 是否默认展开',
                        'notes': 'HTML5新增标签，summary标签用于定义可见的标题。'
                    }
                };
                
                // 获取当前标签的信息
                const info = tagInfo[tagName] || {
                    'description': '标签描述信息不可用。',
                    'syntax': `<${tagName}>...</${tagName}>`,
                    'attributes': '无特定属性',
                    'notes': '标签详细信息不可用。'
                };
                
                // 填充模态框内容
                modalContent.innerHTML = `
                    <div class="space-y-6">
                        <div>
                            <h4 class="text-lg font-semibold mb-2">描述</h4>
                            <p class="text-gray-600 dark:text-gray-400">${info.description}</p>
                        </div>
                        
                        <div>
                            <h4 class="text-lg font-semibold mb-2">语法</h4>
                            <div class="bg-gray-900 rounded p-4 overflow-x-auto">
                                <code class="text-green-400 text-sm font-mono">${info.syntax}</code>
                            </div>
                        </div>
                        
                        <div>
                            <h4 class="text-lg font-semibold mb-2">属性</h4>
                            <p class="text-gray-600 dark:text-gray-400">${info.attributes}</p>
                        </div>
                        
                        <div>
                            <h4 class="text-lg font-semibold mb-2">注意事项</h4>
                            <p class="text-gray-600 dark:text-gray-400">${info.notes}</p>
                        </div>
                    </div>
                `;
            }
            
            // 回到顶部按钮
            const backToTopButton = document.getElementById('back-to-top');
            
            window.addEventListener('scroll', function() {
                if (window.scrollY > 300) {
                    backToTopButton.classList.remove('opacity-0', 'invisible');
                    backToTopButton.classList.add('opacity-100', 'visible');
                } else {
                    backToTopButton.classList.remove('opacity-100', 'visible');
                    backToTopButton.classList.add('opacity-0', 'invisible');
                }
            });
            
            backToTopButton.addEventListener('click', function() {
                window.scrollTo({
                    top: 0,
                    behavior: 'smooth'
                });
            });
        });
    </script>
</body>
</html>